<template>
  <div id="app">
    <a-tabs v-model:activeKey="activeName" @change="handleChange">
      <a-tab-pane key="first" tab="Size Chart">
        <div class="size-chart" v-if="sizeData.size_list && sizeData.size_list[0]">
          <div class="rich-content" v-html="processedContent(sizeData.size_list[0].content)" @click="handleUnitClick"></div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="second" tab="Measurement Guide" v-if="sizeData.measurement_list && sizeData.measurement_list[0]">
        <div class="size-chart" v-if="sizeData.measurement_list && sizeData.measurement_list[0]">
          <div class="rich-content" v-html="processedContent(sizeData.measurement_list[0].content)" @click="handleUnitClick"></div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import { Tabs } from 'ant-design-vue'

const props = defineProps({
  sizeData: {
    type: Object,
    default: () => ({})
  }
})

const activeName = ref('first')

// 处理按钮点击事件
const handleUnitClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  console.log('Clicked element:', target)
  
  if (target.id === 'inchBtn' || target.id === 'cmBtn') {
    console.log('Button clicked:', target.id)
    
    // 移除所有按钮的active类
    const buttons = document.querySelectorAll('#inchBtn, #cmBtn')
    buttons.forEach(btn => {
      btn.classList.remove('active')
    })
    
    // 添加active类到被点击的按钮
    target.classList.add('active')
    
    // 获取所有图表div
    const inchChart = document.getElementById('inchChart')
    const cmChart = document.getElementById('cmChart')
    
    console.log('Found inch chart:', inchChart)
    console.log('Found cm chart:', cmChart)
    
    // 切换图表显示
    if (target.id === 'inchBtn') {
      inchChart?.classList.add('active')
      cmChart?.classList.remove('active')
    } else {
      inchChart?.classList.remove('active')
      cmChart?.classList.add('active')
    }
  }
}

const processedContent = (content: string) => {
  if (!content) return ''
  // 移除可能的HTML转义字符
  let processed = content
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'")
    .replace(/&amp;/g, '&')
  
  // 确保按钮标签被正确解析
  processed = processed.replace(/<button/g, '<button class="rich-button"')
  
  console.log('Processed content:', processed)
  return processed
}

const handleChange = (key: string) => {
  console.log('Tab changed:', key)
}

// 在内容更新后重新绑定事件
const updateContent = async () => {
  await nextTick()
  const buttons = document.querySelectorAll('#inchBtn, #cmBtn')
  console.log('Found buttons:', buttons.length)
  buttons.forEach(button => {
    button.addEventListener('click', (e: Event) => handleUnitClick(e as MouseEvent))
  })
}

// 监听标签页切换
watch(activeName, () => {
  updateContent()
})

// 在组件挂载后初始化
onMounted(() => {
  updateContent()
})
</script>

<style lang="scss" scoped>
:deep(.ant-tabs-content) {
  padding: 32px;
  color: #6b778c;
  font-size: 14px;
  font-weight: 600;
}

/* 修改tabs文字颜色 */
:deep(.ant-tabs-tab) {
  color: #000;
}

:deep(.ant-tabs-tab.ant-tabs-tab-active) {
  color: #000;
  font-weight: bold;
}

:deep(.ant-tabs-ink-bar) {
  background-color: #000;
}

.size-chart {
  width: 100%;
}

.rich-content {
  width: 100%;
}

/* 富文本内容样式 */
.rich-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.rich-content :deep(th),
.rich-content :deep(td) {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.rich-content :deep(th) {
  background-color: #f5f5f5;
}

.rich-content :deep(img) {
  max-width: 100%;
  height: auto;
}

.rich-content :deep(p) {
  margin: 10px 0;
}

.rich-content :deep(ul),
.rich-content :deep(ol) {
  padding-left: 20px;
  margin: 10px 0;
}

/* 图表样式 */
.rich-content :deep(.chart) {
  display: none;
}

.rich-content :deep(.chart.active) {
  display: block;
}

:deep(.ant-tabs-tab.ant-tabs-tab-active),
:deep(.ant-tabs-tab:hover) {
  color: #000;
}
:deep(.css-dev-only-do-not-override-1p3hq3p).ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #000;
    text-shadow: 0 0 0.25px currentcolor;
}
</style>
<style>
body {
  max-width: none !important;
  padding: 0px !important;
}
</style>